<template>
  <el-date-picker
    v-model="vValue"
    type="date"
    placeholder="Date"
    :format="finalFormat"
    :value-format="finalValueFormat"
    :disabled-date="disabledDate"
    unlink-panels
    :disabled="disabled"
    v-bind="attrs"
    @change="val => itemEvent('change', val)"
    @calendar-change="calendarChange"
    @visible-change="visibleChange"
  />
</template>

<script setup>
import _ from 'lodash';
import moment from 'moment';
const attrs = useAttrs();
import { vModelValue } from '@/utils/hooks.js';
// import { vModelValue } from '@/utils/hooks.js';

const props = defineProps({
  modelValue: {
    type: [String, Array],
    default: '',
  },
  disabledType: {
    /**
     * 禁用日期
     * afterToday: 只能选择今天或者今天之前的日期
     * beforeToday: 只能选择今天或者今天之前的日期
     */
    type: String,
    default: '',
  },
  startKey: {
    /**
     * 开始时间key
     */
    type: String,
    default: '',
  },
  endKey: {
    /**
     * 结束时间key
     */
    type: String,
    default: '',
  },
  row: {
    // form数据,或者table的行数据
    type: Object,
    default: () => ({}),
  },
  initDate: {
    // 初始默认值
    type: [String, Array],
    default: '',
  },
});
const emits = defineEmits(['update:modelValue', 'itemEvent']);
const { newValue: key } = vModelValue(props, emits);
let vValue = ref(key);
const selectData = ref();

const finalFormat = computed(() => {
  if (attrs?.format) {
    return attrs.format;
  } else {
    return ['datetime', 'datetimerange'].includes(attrs?.type)
      ? 'DD/MM/YYYY HH:mm:ss'
      : 'DD/MM/YYYY';
  }
});

const finalValueFormat = computed(() => {
  if (attrs?.valueFormat) {
    return attrs.valueFormat;
  } else {
    return ['datetime', 'datetimerange'].includes(attrs?.type)
      ? 'YYYY-MM-DD HH:mm:ss'
      : 'YYYY-MM-DD';
  }
});

// 是否禁用
const disabled = computed(() => {
  return attrs.disabledFn && _.isFunction(attrs.disabledFn)
    ? attrs.disabledFn({ ...props, ...attrs })
    : attrs.disabled || false;
});

function disabledDate(time) {
  let val = props.disabledType;
  let flag = false;
  switch (val) {
    // 只能选择今天或者今天之前的日期
    case 'afterToday':
      flag = time.getTime() > Date.now();
      break;
    // 只能选择今天或者今天之后的日期
    case 'beforeToday':
      flag = time.getTime() < moment().subtract(1, 'day').valueOf();
      break;
    // 只能选择同一天
    case 'sameDay':
      if (selectData.value) {
        const minTime = new Date(selectData.value).getTime();
        flag = time.getTime() !== minTime;
      }
      break;
  }
  return flag;
}

function itemEvent(eventName, val) {
  if (!val && props.initDate?.length) {
    nextTick(() => {
      vValue.value = props.initDate;
      emits('itemEvent', { eventName, prop: attrs.prop, value: props.initDate });
    });
  } else {
    emits('itemEvent', { eventName, prop: attrs.prop, value: val });
  }
}

function calendarChange(dates) {
  if (props.disabledType === 'sameDay') {
    let hasSelectDate = dates !== null && dates.length > 0;
    selectData.value = hasSelectDate ? dates[0] : null;
  }
}

function visibleChange(val) {
  if (!val) {
    selectData.value = null;
  }
}
</script>
